<template>
	<view class="search">
		<input @confirm="onConfirm" :focus="focused" :disabled="disabled" class="input" :value="keyword" @input="change"
			placeholder="请输入关键字">
		<view class="sousuo icon-sousuo iconfont" @click="onConfirm"></view>
	</view>
</template>

<script>
	export default {
		props: ['disabled', 'confirm','value','focused'],
		data() {
			return {
				keyword: null
			}
		},
		watch:{
			value:function(n){
				this.keyword=n
			}
		},
		mounted() {
			this.keyword=this.value
		},
		methods: {
			change(e) {
				this.keyword = e.target.value
				this.$emit('change', e.target.value)
			},
			onConfirm(e) {
				this.$emit('confirm', e.detail.value);
			},
		}
	}
</script>
<style lang="less" scoped>
	.search {
		height: 56px;
		padding: 10px;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		.sousuo{
			position: absolute;
			font-size: 25px;
			top: 50%;
			transform: translate(0,-50%);
			right: 25px;
			color: var(--color-second) !important;
		}
		.input {
			height: 100%;
			padding: 0 15px;
			line-height: 100%;
			border-radius: 999px;
			background-color: var(--background) !important;
			box-shadow: inset 10rpx 10rpx 15rpx var(--color1),
				inset -10rpx -10rpx 15rpx var(--color2);
			color: var(--color-main);
			font-size: 30rpx;

			/deep/.input-placeholder {
				color: var(--color-second) !important;
				font-size: 30rpx;
			}
		}

	}
</style>
